<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户导出进度222</title>
    <style>
        .progress-container {
            width: 500px;
            height: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
            margin: 20px 0;
        }
        .progress-bar {
            height: 100%;
            background: #4CAF50;
            width: 0%;
            transition: width 0.3s ease;
        }
    </style>
</head>
<body>
<button onclick="startExport()">开始导出用户数据</button>
<div class="progress-container">
    <div id="progressBar" class="progress-bar"></div>
</div>
<div id="progressText">请点击开始导出</div>

<script>
    let pollInterval;

    // 启动导出任务
    function startExport() {
        fetch('/export/start')
            .then(res => res.text())
            .then(taskId => {
                document.getElementById("progressText").textContent = "导出中...";
                // 每2秒查询一次进度
                pollInterval = setInterval(() => checkProgress(taskId), 2000);
            });
    }

    // 查询进度并更新UI
    function checkProgress(taskId) {
        fetch(`/export/progress?taskId=${taskId}`)
            .then(res => res.json())
            .then(task => {
                const progressBar = document.getElementById("progressBar");
                const progressText = document.getElementById("progressText");

                progressBar.style.width = `${task.progress}%`;
                progressText.textContent = `导出进度：${task.progress}%`;

                // 任务完成：下载文件
                if (task.status === "COMPLETE") {
                    clearInterval(pollInterval);
                    progressText.textContent = "导出完成，正在准备下载...";
                    window.location.href = `/export/download?taskId=${taskId}`;
                }

                // 任务失败：显示错误
                if (task.status === "FAIL") {
                    clearInterval(pollInterval);
                    progressText.textContent = `导出失败：${task.errorMsg}`;
                }
            });
    }
</script>
</body>
</html>